<template>
	<view class="form-container">
		<nt-order-detail :orderInfo="commonForm.orderInfo"></nt-order-detail>
		<nt-card label="好评修改">
			<view class="nt-submit-item pad">
				<view class="nt-submit-item__evaluate">
					<view class="nt-submit-item__evaluate--list flex">
						<!-- active -->
						<view 
							class="nt-submit-item__evaluate--item"
							:class="{ active: is_praise == it.value }"
							v-for="it in praiseTypeList" 
							:key="it.value"
							@tap="is_praise = it.value"
						>
							<view class="nt-submit-item__evaluate--item-title">{{ it.name }}</view>
							<view class="nt-submit-item__evaluate--item-desc">{{ it.description }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="nt-submit-item pad">
				<view class="nt-submit-item__upload">
					<view class="nt-submit-item__upload--title">
						上传好评截图 <text>（申请奖励）</text>
					</view>
					<view class="nt-submit-item__upload--btn">
						<nt-upload @success="evaluateImage = $event" :maxCount="1"></nt-upload>
					</view>
				</view>
			</view>
			
			<nt-button text="提交" @tap="submit"></nt-button>
		</nt-card>
	</view>
</template>

<script>
import { getCommonFormConfig, submitFavorableComment } from "@/api"
export default {
	data(){
		return {
			praiseTypeList: [],
			evaluateImage: [],
			is_praise: "",
			loading: false
		}
	},
	inject: ["commonForm"],
	created(){
		this.getFormConfig()
	},
	methods: {
		submit(){
			const { is_praise } = this
			let hp_img = ""
			if(!is_praise) return this.toast("请选择好评类型")
			if(this.loading) return
			if(this.evaluateImage.length > 0){
				hp_img = this.evaluateImage[0].url
			}
			this.loading = true
			submitFavorableComment({
				realorder_id: this.commonForm.options.id,
				is_praise: is_praise,
				hp_img
			}).then(res => {
				if(res.code === 1){
					this.toast("提交成功")
					setTimeout(() => this.back(), 1000)
				}
				console.log("")
			}).finally(() => {
				this.loading = false
			})
		},
		// 获取配件
		getFormConfig(type){
			getCommonFormConfig(this.commonForm.options.id).then(res => {
				const { code, data } = res;
				if(code !== 1) return;
				this.praiseTypeList = data.praiseTypeList || []
			})
		}
	}
}
</script>
<style scoped lang="scss">
@import "./style.scss";
.nt-submit{
	&-item{
		&__evaluate{
			&--list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			&--item{
				width: 48%;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #CCCCCC;
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				height: 120rpx;
				color: #333;
				&.active{
					color:#fff;
					background: var(--theme-color);
					color: #fff;
				}
				&--item:nth-child(2n){
					margin-left: 4%;
				}
				&-title{
					font-size: 24rpx;
					font-weight: bold;
				}
				&-desc{
					font-size: 20rpx;
					margin-top: 10rpx;
				}
			}
		}
		&__upload{
			padding: 40rpx 10rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			&--title{
				font-size: 24rpx;
				color: #aaa;
				margin-bottom: 20rpx;
				text{
					color: var(--theme-color)
				}
			}
		}
	}
}
</style>